<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- 包含公共顶部文件 -->
    <style>
        .inventory-control {
            display: flex;
            align-items: center;
            margin: 5px 0;
        }
        .inventory-input {
            width: 50px;
            margin: 0 5px;
            text-align: center;
        }
        .action-buttons {
            display: flex;
            gap: 5px;
        }
    </style>
</head>

<body>
<!-- 背景视频 -->
<video autoplay loop muted playsinline id="background-video">
    <source th:src="@{/images/main_bg.mp4}" type="video/mp4" />
</video>
<header th:replace="common/cms_top"></header>

<div id="BackLink">
    <a th:href="@{/cmsCategoryForm(categoryId=${session.category.catid})}"
       th:text="'Return to ' + ${session.category.name}"></a>
</div>

<div id="Catalog">
    <h2 th:text="${session.product.name}"></h2>

    <table>
        <tr>
            <th>Item ID</th>
            <th>Product ID</th>
            <th>Description</th>
            <th>List Price</th>
            <th>Inventory</th>
            <th>Actions</th>
        </tr>
        <!-- 遍历商品列表 -->
        <tr th:each="item : ${session.itemList}">
            <td>
                <a th:href="@{/itemForm(itemId=${item.itemid})}" th:text="${item.itemid}"></a>
            </td>
            <td th:text="${item.product.productid}"></td>
            <td th:text="${item.attr1 + ' ' +
                              item.attr2 + ' ' +
                              item.attr3 + ' ' +
                              item.attr4 + ' ' +
                              item.attr5 + ' ' +
                              session.product.name}"></td>
            <td th:text="'$' + ${#numbers.formatDecimal(item.listprice, 1, 2)}"></td>



            <td>
                <span th:if="${item.quantity <= 0}">Out of stock</span>
                <span th:if="${item.quantity > 0}" th:text="${item.quantity} + ' in stock'"></span>
            </td>



            <td>
                <div class="inventory-control">
                    <form th:action="@{/increaseInventoryByAmount}" method="get" style="display:inline;">
                        <input type="hidden" name="workingItemId" th:value="${item.itemid}">
                        <input type="number" name="amount" class="inventory-input" min="1" value="1">
                        <button type="submit" style="color:orange;" class="Button">+</button>
                    </form>
                    <form th:action="@{/decreaseInventoryByAmount}" method="get" style="display:inline;">
                        <input type="hidden" name="workingItemId" th:value="${item.itemid}">
                        <input type="number" name="amount" class="inventory-input" min="1" value="1">
                        <button type="submit" style="color:orange;" class="Button">-</button>
                    </form>
                </div>



                <div class="action-buttons">
                    <a style="color:orange;" class="Button"
                       th:href="@{/updateItemForm(workingItemId=${item.itemid})}">Update</a>
                    <a style="color:orange;" class="Button"
                       th:href="@{/removeItem(workingItemId=${item.itemid})}">Remove</a>
                </div>



            </td>
        </tr>
    </table>
    <a style="color:orange; font-size: 25px;" class="Button" th:href="@{/addItemForm(productId=${session.product.productid})}">Add New Item</a>

</div>

<!-- 包含公共底部文件 -->
<footer th:replace="common/bottom"></footer>
</body>
</html>









